<!DOCTYPE html>
<html>

<head>
    <meta name="screen-orientation" content="portrait">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <title>年会抽奖小程序</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        canvas{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99999;
            pointer-events: none;
        }
        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;

        }

        body {
            background: url("./img/bg.jpg") no-repeat 50% 0%;
            background-size: 100%;
        }

        .result {
            position: absolute;
            height: 320px;
            width: 100%;
            left: 0;
            top: 50%;
            margin-top: -160px;
            text-align: center;
            padding: 10px;
            display: none;
        }

        .result span {
            display: inline-block;
            font-size: 25px;
            width: 150px;
            background: #fff;
            line-height: 30px;
            color: #000;
            margin: 5px;
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
            padding: 10px 0;
        }

        button,
        input,
        optgroup,
        select,
        textarea {
            color: inherit;
            font: inherit;
            margin: 0;
            border: none;
        }

        button {
            overflow: visible;
        }

        button,
        select {
            text-transform: none;
        }

        button,
        html input[type=button],
        input[type=reset],
        input[type=submit] {
            -webkit-appearance: button;
            cursor: pointer;
        }

        .pure-button {
            display: inline-block;
            zoom: 1;
            line-height: normal;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .pure-button {
            font-family: inherit;
            font-size: 100%;
            padding: .5em 1em;
            color: #444;
            color: rgba(0, 0, 0, .8);
            border: 0 rgba(0, 0, 0, 0);
            background-color: #E6E6E6;
            text-decoration: none;
            border-radius: 2px;
        }

        .pure-button:focus {
            outline: 0
        }

        .pure-button-hover,
        .pure-button:hover,
        .pure-button:focus {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, .05)), to(rgba(0, 0, 0, .1)));
            background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
            background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .1));
            background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
            background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
        }

        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65);
        }

        .button-error {
            background: rgb(202, 60, 60);
        }

        .button-warning {
            background: rgb(223, 117, 20);
        }

        .button-secondary {
            background: rgb(66, 184, 221);
        }

        .tools {
            position: absolute;
            bottom: 20px;
            right: 20px;
            text-align: center;
        }

        .tools .pure-button {
            display: inline-block;
            margin: 5px;
            padding: 10px 0;
            text-align: center;
            width: 50px;
        }

        .mask {
            -webkit-filter: blur(5px);
            filter: blur(5px);
        }

        #main {
            -webkit-transition: all 1s;
            transition: all 1s;
            width: 100%;
            height: 100%;
        }

        .result-btn {
            margin-top: 20px;
            text-align: right;
            margin-right: 30px;
            text-decoration: none;
            color: white;
        }

        .wall .left,
        .wall .in {
            float: left;
            width: 26%;
            color: #fff;
            height: 82%;
           margin-top: 8%;
           margin-left:1%;
            border-radius: 15px;
            border: 2px solid #fff;
            background: rgba(0, 0, 0, 0.6);
        }

        .wall .in {
            width: 71%;
        }
/* 
        .wall .right {
            width: 30%;
            display:none;
        } */

        .wall .left label {
            display: inline-block;
            margin-right: 20px;
            padding-bottom: 5px;
        }

        .wall .left h1 {
            text-align: center;
            font-weight: 800;
            font-size: 21px;
            padding-bottom: 8px;
        }

        .wall .left .top {
            height: 60%;
            border-bottom: 2px solid #fff;
            padding: 25px;

        }

        .wall .left .bottom {
            padding: 25px;
           
        }

        .wall .in .top {
            height: 75%;
            border-bottom: 2px solid #fff;
            padding: 25px;
                            text-align: center;
    font-size: 22px;
    line-height: 34px;
        }

        .wall .in .top label:first-child {
            margin: 0 25px;
            color: rgb(253, 104, 141);
        }

        .wall .in .top label:last-child {
            margin: 0 25px;
            color: rgb(50, 255, 152);
        }

        .wall .in .bottom {
                padding:6% 0;
             text-align: center;
             transform: scale(2);
        }

        .wall .in .bottom .pure-button {
            margin: 10px;
        }

        .test,.wall .right {
            text-align: center;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 1200px;
            height: 600px;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0px 0px 15px #ccc;
            z-index: 9999;
        }

        .test label {
            display: inline-block;
            margin-right: 30px;
            margin-bottom: 8px;
        }

        /* .right {
            text-align: center;
            padding: 10px;
        } */

        .wall .right h1 {
            padding: 10px 0;
            font-weight: 800;
            color: rgb(255, 72, 0);
            font-size: 22px;
        }

        .wall .right label {
            display: inline-block;
            margin: 3px 8px;
        }
    </style>
</head>

<body>

    <div id="main" class="wall">
        <!-- <a class="pure-button button-success" @click='isShowTest=true'
            style="position: absolute;right: 10px;top: 10px;z-index: 9999;">概率测试</a> -->
             <a class="pure-button button-success" @click='closeHc()'
            style="position: absolute;right: 10px;top: 10px;z-index: 9999;">清除缓存</a>
              <a class="pure-button button-success"  @click=" hjmd=true "
            style="position: absolute;left: 10px;top: 10px;z-index: 9999;">获奖名单</a>
        <div class="left">
            <div class="top">
                <h1>剩余奖品区</h1>
                <label for="" v-for="(value) in prize">{{value.name}}</label>
            </div>
            <div class="bottom">
                <h1>剩余人员区</h1>
                <label for="" v-for="(value) in personnel">{{ personnel.length<=1?'????':  value.name}}</label>
            </div>
        </div>
        <div class="in">
            <div class="top">
                <p v-for="(value) in showText"><label for="" style="width: 3em;">{{value.name}}</label>获得<label
                        for="" style="width: 8em; display: inline-block;">{{value.prizeName}}</label></p>
            </div>
            <div class="bottom">
                <a  class="pure-button " :class="preventRepetition===0?'button-success':'button-error'"  v-show="!(preventRepetition===2)"
                    @click="startLottery()" @keyup.enter.native="startLottery()" >{{preventRepetition===0?'请按下回车键开始':'请按下回车键结束'}}{{buttonList[lotteryIndex].name}}</a>
            </div>
        </div>
        <div class="right" v-if="hjmd">
            <h1>特等奖获得者</h1>
            <p><label for="" v-for="(value) in zhongjiangList.filter(item=>item.awardGrade===1)">
                    {{value.name}}({{value.awardNme}})
                </label></p>
            <h1>一等奖获得者</h1>
            <p><label for="" v-for="(value) in zhongjiangList.filter(item=>item.awardGrade===2)">
                    {{value.name}}({{value.awardNme}}) </label></p>
            <h1>二等奖获得者</h1>
            <p><label for="" v-for="(value) in zhongjiangList.filter(item=>item.awardGrade===3)">
                    {{value.name}}({{value.awardNme}}) </label></p>
            <h1>三等奖获得者</h1>
            <p><label for="" v-for="(value) in zhongjiangList.filter(item=>item.awardGrade===4)">
                    {{value.name}}({{value.awardNme}}) </label></p>
            <h1>安慰奖获得者</h1>
            <p><label for="" v-for="(value) in zhongjiangList.filter(item=>item.awardGrade===5)">
                    {{value.name}}({{value.awardNme}}) </label></p>
                    <br><br>
                     <a class="pure-button button-warning" @click='hjmd=false'>关闭</a>
        </div>
        <div class="test" v-show="isShowTest">
            <br>
            <h1>测试次数：{{ total }} 次</h1>
            <h1>最大次数：{{ maxInt }} 次</h1>
            <h1>最小次数：{{ minInt }} 次</h1>
            <h1>差值：{{maxInt - minInt }} 次，{{(maxInt - minInt)/total*100|addZero}}%</h1>
            <br>
            <p><label v-for="(value) in personnel">{{value.name}}：{{value.text}}次
                    {{value.text/total*100|addZero}}%</label>
            </p>
            <a class="pure-button button-success" @click="test(true)">开始测试</a>
            <a class="pure-button button-error" @click="test(false)">结束测试</a>
            <a class="pure-button button-warning" @click='isShowTest=false'>关闭</a>

        </div>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/jp.js"></script>
      <script type="text/javascript" src="js/md5.js"></script>
      <script type="text/javascript" src="js/yh.js"></script>
    <script type="text/javascript" >
 
      
        (function () {
            Vue.filter('addZero', function (value) {
                return value.toFixed(5)
            })
            new Vue({
                el: '#main',
                data: {
                    hjmd:false,
                    yh:null,
                    preventRepetition:0,
                    lotteryIndex:0,
                    maxInt: 0,
                    minInt: 0,
                    testTiming: null,
                    total: 0,
                    isShowTest: false,
                    prize,
                    personnel,
                    timingFn:null,
                    buttonList: [
                        {
                            name: "抽取幸运奖",
                            ischouq: false,
                            grade: 5,
                            style: 'button-warning',
                            count: 18,
                        },
                        {
                            name: "抽取三等奖",
                            ischouq: false,
                            grade: 4,
                            style: 'button-error',
                            count: 16,
                        },
                        {
                            name: "抽取二等奖",
                            ischouq: false,
                            grade: 3,
                            style: 'button-error',
                            count: 10,
                        },
                        {
                            name: "抽取一等奖",
                            ischouq: false,
                            grade: 2,
                            style: 'button-error',
                            count: 6,
                        },
                        {
                            name: "抽取特等奖",
                            ischouq: false,
                            grade: 1,
                            style: 'button-success',
                            count: 1,
                        },
                        {
                            name: "恭喜全体员工新年快乐",
                            ischouq: false,
                            grade: 1,
                            style: 'button-success',
                            count: 1,
                        },
                    ],
                    showText: [],
                    zhongjiangList: []
                },
                created() { 
                    this.keyupEnter();
                },
                mounted() {
                    const notDrawn= localStorage.getItem("notDrawn");
                    const drawn= localStorage.getItem("drawn");
                    const prize= localStorage.getItem("prize");
                    const lotteryIndex = localStorage.getItem("lotteryIndex");
                    if(notDrawn&& drawn && prize){
                        console.log(notDrawn, drawn, prize);
                        this.personnel= JSON.parse(notDrawn) ;
                        console.log(this.personnel)
                        this.zhongjiangList= JSON.parse(drawn);
                        this.prize= JSON.parse(prize);
                        this.lotteryIndex= parseInt(lotteryIndex);
                    }
                    this.upsetNames();
                },
                methods: {
                    // 打乱人物名称
                    upsetNames(){
                        let list=JSON.stringify(this.personnel);
                        list=JSON.parse(list);
                        const list2=[];
                        for(let i=0;i<this.personnel.length;i++){
                            const num = Math.floor(Math.random() * (list.length));
                            list2.push(...list.splice(num, 1));
                        }
                        this.personnel=list2;
                    },
                    closeHc(){
                       localStorage.removeItem("notDrawn","drawn","prize","lotteryIndex");
                       location.reload();
                    },
                    keyupEnter() {
                        document.onkeydown = e => {
                            let body = document.getElementsByTagName('body')[0]
                            if (e.keyCode === 13 && e.target === body) {
                                this.startLottery() //调用查询方法
                            }
                        }
                    },
                    handleAddBook() {
                        console.log('enter',"handleAddBook"); 
                    },

                    // 开始抽奖
                    startLottery()
                    {
                        console.log('enter', "handleAddBook"); 
                        const value= this.buttonList[this.lotteryIndex];
                        if(this.lotteryIndex >= this.buttonList.length - 1){
                            alert("祝全体员工新年快了,万事如意!");
                            return;
                        }

                        if(this.preventRepetition===0){
                            this.preventRepetition=1;
                              this.timingFn = setInterval(() => {
                                this.animation(value.grade, value.count);
                            }, 1000 / 10);
                        }
                        else if (this.preventRepetition === 1) {
                            clearInterval(this.timingFn);
                            this.result(value.grade, value.count);
                            this.preventRepetition = 2;
                            localStorage.setItem("notDrawn", JSON.stringify(this.personnel));
                            localStorage.setItem("drawn", JSON.stringify(this.zhongjiangList));
                            localStorage.setItem("prize", JSON.stringify(this.prize));
                            localStorage.setItem("lotteryIndex", this.lotteryIndex + 1);
                            this.upsetNames();
                            this.yh = setInterval(() => {
                                canvas.click();
                            }, 1000 / 10);
                            setTimeout(() => {
                                if (this.lotteryIndex < this.buttonList.length - 1) {
                                    this.lotteryIndex += 1;
                                    this.preventRepetition = 0;
                                }
                                clearInterval(this.yh)
                            }, 5000)
                        }                    
                    },

                    // 结束抽奖
                    finishLottery(value){
                        if(this.preventRepetition === 1){
                            clearInterval(this.timingFn);
                            this.result(value.grade, value.count);
                            this.preventRepetition = 2;
                            localStorage.setItem("notDrawn",JSON.stringify(this.personnel) );
                            localStorage.setItem("drawn", JSON.stringify(this.zhongjiangList));
                            localStorage.setItem("prize", JSON.stringify(this.prize));
                            localStorage.setItem("lotteryIndex", this.lotteryIndex+1);
                            this.yh=setInterval(()=>{
                                canvas.click();
                            },1000/10)
                            setTimeout(() => {
                                if (this.lotteryIndex < this.buttonList.length - 1) {
                                    this.lotteryIndex += 1;
                                    this.preventRepetition = 0;
                                }
                                clearInterval(this.yh)
                            }, 5000)
                        }
                    },

                    // 开始抽奖事件
                    go(value) {
                        if (value.ischouq) return;
                        this.buttonList.find(item => item.name === value.name).ischouq = true;
                        const oper = setInterval(() => {
                            this.animation(value.grade, value.count);
                        }, 1000 / 10);

                        setTimeout(() => {
                            clearInterval(oper);
                            this.result(value.grade, value.count);
                        }, 50)
                    },

                    // 动画算法
                    animation(grade, count) {
                        const list = [];
                        for (let i = 0; i < count; i++) {
                            const num = Math.floor(Math.random() * (this.personnel.length));
                            const num2 = Math.floor(Math.random() * (this.prize.filter(item => item.grade === grade).length));
                            const text = {
                                name:this.personnel.length<=1?"????":  this.personnel[num].name,
                                prizeName: this.prize.filter(item => item.grade === grade)[num2].name,
                            }
                            list.push(text)
                        }
                        this.showText = list;
                    },

                    // 结果算法
                    result(grade, count) {
                        const list = [];
                        let index = 0;
                        for (let i = 0; i < this.prize.length; i++) {
                            if (grade === this.prize[i].grade) {
                                index = i;
                                break;
                            }
                        }
                        const prizeList = this.prize.splice(index, count);
                   
                        for (let i = 0; i < count; i++) {
                            const count2= this.personnel.length;
                            // const num =this.personnel.length <= 1 ? 0 : Math.floor(Math.random() * (this.personnel.length));
                            // const num = this.personnel.length <= 1 ? 0 : this.rand(this.personnel.length - 1);
                            const num = this.personnel.length <= 1 ? 0 : this.getRandomIntInclusive(0, count2 - 1);
                            console.log(i, prizeList.length, prizeList[i].name)
                            const text = {
                                name: this.personnel[num].name,
                                prizeName: prizeList[i].name,
                            }
                            list.push(text);
                            this.personnel[num].awardNme = prizeList[i].name;
                            this.personnel[num].awardGrade = prizeList[i].grade;
                            this.zhongjiangList.push(this.personnel[num]);
                            this.personnel.splice(num, 1);
                        }
                        this.showText = list;
                    },

                    // 随机数算法
                    rnd(seed) {
                        seed = (seed * 9301 + 49297) % 233280;
                        return seed / (233280.0);
                    },
                    rand(number) {
                        today = new Date();
                        seed = today.getTime();
                        return Math.ceil(this.rnd(seed) * (number + 1)) - 1;
                    },

                    getRandomIntInclusive(min, max) {
                        const randomBuffer = new Uint32Array(1);
                        window.crypto.getRandomValues(randomBuffer);
                        let randomNumber = randomBuffer[0] / (0xffffffff + 1);
                        min = Math.ceil(min);
                        max = Math.floor(max);
                        res = Math.floor(randomNumber * (max - min + 1)) + min;
                        return res;
                    },

                    hashCode (str){
                        var hash = 0;
                        if (str.length == 0) return hash;
                        for (i = 0; i < str.length; i++) {
                            char = str.charCodeAt(i);
                            hash = ((hash<<5)-hash)+char;
                            hash = hash & hash; // Convert to 32bit integer
                        }
                        return hash;
                    },

                    // 测试概率
                    test(isOpen) {
                        if (isOpen) {
                            // for(let i=0;i<1000000;i++){
                            //      this.total += 1;
                            //     // 第一种办法
                            //      //  const num = Math.floor(Math.random() * (this.personnel.length));
                            //     // 第二种办法
                            //      // const num = this.rand(this.personnel.length - 1)
                            //     // 第三种办法
                            //      // const num = this.getRandomIntInclusive(0, this.personnel.length - 1)

                            //     // var str1 = hex_md5(num+"");
                            //     //  var  hash = Math.abs (this.hashCode(str1)) %55
                            //     //  num =hash;
                            //     this.personnel[num].text += 1;
                            //     const list = this.personnel.map(item => item.text)
                            //     this.maxInt = Math.max(...list);
                            //     this.minInt = Math.min(...list);
                            // }
                            this.testTiming = setInterval(() => {
                                this.total += 1;
                                // 第一种办法
                                // const num = this.getRandomIntInclusive(0, this.personnel.length - 1)
                                // 第二种办法
                                // const num = this.rand(this.personnel.length - 1)
                                // 第三种办法
                                const num = Math.floor(Math.random() * (this.personnel.length));

                                // var str1 = hex_md5(num+"");
                                //  var  hash = Math.abs (this.hashCode(str1)) %55
                                //  num =hash;
                                this.personnel[num].text += 1;
                                const list = this.personnel.map(item => item.text)
                                this.maxInt = Math.max(...list);
                                this.minInt = Math.min(...list);
                                // this.personnel

                                // if (this.total >= 40000) clearInterval(this.testTiming);
                            }, 1)
                        }
                        else {
                            clearInterval(this.testTiming)
                        }
                    }
                }
            });
        })();
    </script>
</body>

</html>